<#assign menu="employee">
<#assign menu2="">
<#include "/common/header.ftl">
<#include "/common/sidebar.ftl">

<!-- BEGIN PAGE -->
<div class="page-content">
    <!-- BEGIN PAGE HEADER-->
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">
                员工管理
            </h3>
            <!-- END PAGE TITLE & BREADCRUMB-->
        </div>
    </div>
    <!-- END PAGE HEADER-->

    <div id="EmployeeModal" class="modal fade modal-scroll modal-max">
        <form class="form-horizontal" id="EmployeeForm" action="javascript:submit();" autocomplete="off" method="post" role="form">
            <div class="modal-header">
                <button type="button" class="close" onclick="employeeCancel();" aria-hidden="true"></button>
                <h4 class="modal-title" id="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="hidden" name="userId" id="userId"/>
                    <label class="col-sm-12 control-label source-title">员工基本信息</label>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="account" id="account" placeholder="">
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">登录密码</label>
                    <div class="col-sm-3">
                        <input type="password" class="form-control" name="password" id="password" placeholder="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">员工姓名</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="name" id="name" placeholder="">
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">身份证号</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="idcard" id="idcard" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">员工性别</label>
                    <div class="col-sm-3 radio-list">
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="sex1" value="男" checked> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" id="sex2" value="女" > 女
                        </label>
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">手机号码</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control tooltips" data-placement="top" data-original-title="该手机号码默认为用户登录名" name="tel" id="tel" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系地址</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="address" id="address" placeholder="">
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">籍贯</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="nativePlace" id="nativePlace" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">出生日期</label>
                    <div class="col-md-3">
                        <div class="input-group date date-picker" data-date-format="yyyy-mm-dd" data-date-end-date="+0d">
                            <input type="text" class="form-control" name="birth" id="birth" onchange="birthChange();"/>
												<span class="input-group-btn">
												<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
												</span>
                        </div>
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">邮箱地址</label>
                    <div class="col-sm-3">
                        <input type="email" class="form-control" name="email" id="email" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">学历</label>
                    <div class="col-sm-3">
                        <select class="form-control" id="education" name="education" >
                            <option value=""></option>
                            <option value="高中">高中</option>
                            <option value="普通专科">普通专科</option>
                            <option value="大学本科">大学本科</option>
                            <option value="硕士研究生">硕士研究生</option>
                            <option value="博士研究生">博士研究生</option>
                        </select>
                    </div>
                    <label class="col-sm-1"></label>
                    <label class="col-sm-2 control-label">婚姻状态</label>
                    <div class="col-sm-3">
                        <select class="form-control" id="maritalstatus" name="maritalstatus" >
                            <option value=""></option>
                            <option value="未婚">未婚</option>
                            <option value="已婚">已婚</option>
                            <option value="离异">离异</option>
                            <option value="丧偶">丧偶</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-md-3">
                        <div class="input-group date date-picker" data-date-format="yyyy-mm-dd" data-date-end-date="+0d">
                            <input type="text" class="form-control" name="entryTime" id="entryTime" onchange="entryTimeChange();"/>
												<span class="input-group-btn">
												<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
												</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-12 control-label source-title" >员工部门管理</label>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">所属门店</label>
                    <div class="col-md-3">
                        <select class="form-control" id="city" name="city" onchange="cityChange();">
                            <option value="">地区</option>
                            <option value="1">河南省郑州市</option>
                            <option value="2">湖北省武汉市</option>
                            <option value="3">安徽省合肥市</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" id="storeId" name="storeId" style="">
                            <option value="">门店</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">职务</label>
                    <div class="col-md-3">
                        <select class="form-control" id="post" name="post" >
                            <option value=""></option>
                            <option value="置业顾问">置业顾问</option>
                            <option value="门店经理">门店经理</option>
                            <option value="片区经理">片区经理</option>
                            <option value="租售经理">租售经理</option>
                            <option value="总监">总监</option>
                            <option value="系统管理员">系统管理员</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">角色选择</label>
                    <div class="col-md-3">
                        <select class="form-control" id="roleId" name="roleId" >
                            <option value=""></option>
                            <option value="10001">置业顾问</option>
                            <option value="10002">门店经理</option>
                            <option value="0">系统管理员</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="statusDiv" style="display:none;">
                    <label class="col-md-2 control-label">员工状态</label>
                    <div class="col-md-3">
                        <select class="form-control" id="employeeStatus" name="employeeStatus" >
                            <option value="在职">在职</option>
                            <option value="离职">离职</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn blue">提交</button>

                <button type="button" style="margin-left: 200px;" onclick="employeeCancel();" class="btn">取消</button>
            </div>
        </form>
    </div>
    <!-- BEGIN PAGE CONTENT-->
    <div class="row">
        <div class="col-md-12">
            <div class="table-toolbar">
                <div class="btn-group">
                    <button id="sample_editable_1_new" class="btn green" onclick="createEmployee();">
                        <i class="fa fa-plus"></i> 录入新员工
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="portlet box light-grey">
                <div class="portlet-title">
                    <div class="caption"><i class="fa fa-search"></i> 精确查询</div>
                    <div class="tools">
                        <#--<a href="javascript:;" class="collapse"></a>-->
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="form-horizontal searchDiv">
                        <div class="form-group">
                            <label class="col-md-1 control-label">员工ID：</label>
                            <div class="col-md-2">
                                <input type="text" id="searchId" name="searchId" class="form-control" placeholder="">
                            </div>
                            <label class="col-md-1 control-label">员工姓名：</label>
                            <div class="col-md-2">
                                <input type="text" id="searchNmae" name="searchNmae" class="form-control" placeholder="">
                            </div>
                            <label class="col-md-1 control-label">联系方式：</label>
                            <div class="col-md-2">
                                <input type="text" id="searchPhone" name="searchPhone" class="form-control" placeholder="">
                            </div>
                            <label class="col-md-1 control-label">所属角色：</label>
                            <div class="col-md-2">
                                <select class="form-control" id="searchRole" name="searchRole" >
                                    <option value=""></option>
                                    <option value="10001">置业顾问</option>
                                    <option value="10002">门店经理</option>
                                    <option value="0">系统管理员</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">入职时间：</label>
                            <div class="col-md-2">
                                <input class="form-control form-control-inline date-picker" data-date-format="yyyy-mm-dd" type="text" value="" name="searchTime" id="searchTime"/>
                            </div>
                            <label class="col-md-1 control-label">职务：</label>
                            <div class="col-md-2">
                                <select class="form-control" id="searchDuty" name="searchDuty" >
                                    <option value=""></option>
                                    <option value="置业顾问">置业顾问</option>
                                    <option value="门店经理">门店经理</option>
                                    <option value="片区经理">片区经理</option>
                                    <option value="租售经理">租售经理</option>
                                    <option value="总监">总监</option>
                                    <option value="系统管理员">系统管理员</option>
                                </select>
                            </div>
                            <label class="col-md-1 control-label">所属门店：</label>
                            <div class="col-md-2">
                                <select class="form-control" id="searchArea" name="searchArea" onchange="searchAreaChange();">
                                    <option value="">地区</option>
                                    <option value="1">河南省郑州市</option>
                                    <option value="2">湖北省武汉市</option>
                                    <option value="3">安徽省合肥市</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" id="searchStore" name="searchStore" >
                                    <option value="">门店</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">员工状态：</label>
                            <div class="col-md-2">
                                <select class="form-control" id="searchStatus" name="searchStatus" >
                                    <option value=""></option>
                                    <option value="在职">在职</option>
                                    <option value="离职">离职</option>
                                </select>
                            </div>
                            <label class="col-md-7"></label>
                            <div class="col-md-2">
                                <button type="button" class="btn blue" style="width: 100%;" onclick="search();"><i class="fa fa-search"></i> 查找</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box light-grey">
                <div class="portlet-title">
                    <div class="caption"><i class="fa fa-globe"></i>员工列表</div>
                    <div class="tools">
                        <a href="javascript:;" class="collapse"></a>
                    </div>
                </div>
                <div class="portlet-body">
                    <table class="table table-striped table-bordered table-hover" id="EmployeeTable">
                        <thead>
                        <tr>
                            <th>员工ID</th>
                            <th>员工姓名</th>
                            <th>联系方式</th>
                            <th>门店</th>
                            <th>职务</th>
                            <th>所属角色</th>
                            <th>最后登录时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="EmployeeTbody">
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
    <!-- END PAGE CONTENT-->
</div>
<!-- END PAGE -->
<#include "/common/footer.ftl">

<link rel="stylesheet" href="${basePath}/plugins/bootstrap-modal/css/bootstrap-modal.css" />
<link rel="stylesheet" href="${basePath}/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" />
<script type="text/javascript" src="${basePath}/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="${basePath}/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/plugins/bootstrap-datepicker/css/datepicker.css" />
<script type="text/javascript" src="${basePath}/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="${basePath}/plugins/layer/layer.js"></script>
<link href="${basePath}/plugins/layer/skin/layer.css" rel="stylesheet">
<script src="${basePath}/scripts/employee.js"></script>
<script src="${basePath}/scripts/common.js"></script>
<link href="${basePath}/css/pages/employee.css" rel="stylesheet">

<script>
    var ifLastIsModify=false;
    var oTable=null;
    function birthChange(){
        var birth=$("#birth");
        birth.parent().removeClass('has-error');
        birth.parent().find(".help-block").remove();
    }
    function entryTimeChange(){
        var entryTime=$("#entryTime");
        entryTime.parent().removeClass('has-error');
        entryTime.parent().find(".help-block").remove();
    }
    function createEmployee(){
        $("#modal-title").html("录入新员工");
//        if(ifLastIsModify){
            $("#EmployeeForm")[0].reset();
            $('#EmployeeForm').validate().resetForm();
            $("#EmployeeForm").find("div").removeClass("has-error");

            $("#storeId").html('<option value="">门店</option>');

//            ifLastIsModify=false;
//        }
        $("#userId").val("");
        $("#statusDiv").hide();
//        $("#EmployeeModal").modal('show');
        $('#EmployeeModal').modal({backdrop:"static",show:true});
    }

    function employeeCancel(){
        layer.confirm('是否关闭当前窗口?<br/>（若是，当前更改的信息将不会保存！）', {
            title:" ",
            btn: ['是','否'] //按钮
        }, function(){
            $("#EmployeeModal").modal('hide');
            var index = layer.index; //获取当前弹层的索引号
            layer.close(index); //关闭当前弹层
        }, function(){
        });
    }

    function editEmployee(id){
        ifLastIsModify=true;
        $("#statusDiv").show();
        $("#EmployeeForm")[0].reset();
        $('#EmployeeForm').validate().resetForm();
        $("#EmployeeForm").find("div").removeClass("has-error");
        $("#modal-title").html("编辑员工")
        var data={};
        data.userId=id;
        var url=EmployeeViewURL;
        $.ajax({
            async: false,
            url: url,
            dataType: 'jsonp',
            type: 'GET',
            jsonp: 'callback',
            data: data,
            success: function (json) {
                var result=verifyResult(json);
                if(result) {
                    var employee = json.attach;
                    $("#userId").val(employee.userId);
                    $("#name").val(employee.name);
                    $("#idcard").val(employee.idcard);
                    $("#sex").val(employee.sex);
                    $("#address").val(employee.address);
                    $("#nativePlace").val(employee.nativePlace);
                    $("#birth").val(employee.birth.substring(0, 10));
                    $("#education").val(employee.education);
                    $("#maritalstatus").val(employee.maritalstatus);
                    $("#entryTime").val(employee.entryTime.substring(0, 10));
                    var storeId = employee.storeId;
                    if (storeId <= 4) {
                        $("#city").val(1);
                    } else if (storeId <= 6) {
                        $("#city").val(2);
                    } else {
                        $("#city").val(3);
                    }
                    cityChange();
                    $("#storeId").val(storeId);

                    $("#post").val(employee.post);
                    $("#employeeStatus").val(employee.employeeStatus);
                    $("#tel").val(employee.userTel);
                    $("#email").val(employee.userMail);
                    $("#account").val(employee.userAccount);
                    $("#password").val("******");
                    $("#roleId").val(employee.roles[0].roleId);
//                $("#EmployeeModal").modal('show');
                    $('#EmployeeModal').modal({backdrop: "static", show: true});
                }
            }
        })
    }
    if (jQuery().datepicker) {
        $('.date-picker').datepicker({
            rtl: App.isRTL(),
            autoclose: true
        });
        Employee.init();
        search();

        $('#EmployeeTbody').on('click', '.edit', function() {
            var $tr = $(this).parents('tr');
            var id=$tr[0].id;
            editEmployee(id);
        });

        $('#EmployeeTbody').on('click', '.delete', function() {
            var $tr = $(this).parents('tr');
            var id=$tr[0].id;
            var data={};
            data.userId=id;
            layer.confirm('是否删除该员工信息?', {
                title:" ",
                btn: ['是','否'] //按钮
            }, function(){
                var url=EmployeeDeleteURL;
                $.ajax({
                    async: false,
                    url: url,
                    dataType: 'jsonp',
                    type: 'GET',
                    jsonp: 'callback',
                    data: data,
                    success: function (json) {
                        var result=verifyResult(json);
                        if(result) {
                            search();
                        }
                    }
                })
                layer.msg('删除成功', {
                    time: 1000, //1s后自动关闭
                });
            }, function(){
            });
        });
    }
    function cityChange(){
        var city=$("#city").val();
        var text="";
        if(city==1){
            text+='<option value="1">森林湖店</option>';
            text+='<option value="2">新都汇店</option>';
            text+='<option value="3">湾景国际店</option>';
            text+='<option value="4">悦澜店</option>';
        }else  if(city==2){
            var text="";
            text+='<option value="5">森林湖店</option>';
            text+='<option value="6">都汇华府店</option>';
        }else  if(city==3){
            var text="";
            text+='<option value="7">都汇华府店</option>';
            text+='<option value="8">都汇华郡店</option>';
            text+='<option value="9">城邦花园店</option>';
        }else{
            text+='<option value="">门店</option>';
        }

        if(city>=1){
            var storeId=$("#storeId");
            storeId.parent().removeClass('has-error');
            storeId.parent().find(".help-block").remove();
        }
        $("#storeId").html(text);
    }
    function searchAreaChange(){
        var city=$("#searchArea").val();
        var text="";
        if(city==1){
            text+='<option value="1">森林湖店</option>';
            text+='<option value="2">新都汇店</option>';
            text+='<option value="3">湾景国际店</option>';
            text+='<option value="4">悦澜店</option>';
        }else  if(city==2){
            var text="";
            text+='<option value="5">森林湖店</option>';
            text+='<option value="6">都汇华府店</option>';
        }else  if(city==3){
            var text="";
            text+='<option value="7">都汇华府店</option>';
            text+='<option value="8">都汇华郡店</option>';
            text+='<option value="9">城邦花园店</option>';
        }else{
            text+='<option value="">门店</option>';
        }
        $("#searchStore").html(text);

    }
    function submit(){
        var url="";
        var tilte="";
        var userId= $("#userId").val();
        if(ifNotNull(userId)){
            url=EmployeeEditURL;
            title="确认修改该员工信息？";
        }else{
            url=EmployeeAddURL;
            title="确认提交新员工信息？";
        }
        layer.confirm(title, {
            title:" ",
            btn: ['是','否'] //按钮
        }, function(){
            var data={};
            var formData= $('#EmployeeForm').serializeArray();
            $.each(formData, function() {
                data[this.name] = this.value;
            });
            var userId= $("#userId").val();
            $.ajax({
                async: false,
                url: url,
                dataType: 'jsonp',
                type: 'GET',
                jsonp: 'callback',
                data: data,
                success: function (json) {
                    var result=verifyResult(json);
                    if(result){
                        search();
                        if(ifNotNull(userId)){
                            layer.msg('修改成功', {
                                time: 1000, //1s后自动关闭
                            });
                        }else{
                            layer.msg('添加成功', {
                                time: 1000, //1s后自动关闭
                            });
                        }
                        $("#EmployeeModal").modal('hide');
                    }
                }
            });
        }, function(){
        });
    }

    function ifNotNull(value){
        if (value == null || value == undefined || value == '') {
            return false;
        }else{
            return true;
        }
    }

    function search(){
        var data={};
        var userId=$('#searchId').val();
        if(ifNotNull(userId)){
            data.userId=userId;
        }
        var name=$('#searchNmae').val();
        if(ifNotNull(name)){
            data.name=name;
        }
        var tel=$('#searchPhone').val();
        if(ifNotNull(tel)){
            data.tel=tel;
        }
        var entryTime=$('#searchTime').val();
        if(ifNotNull(entryTime)){
            data.entryTime=entryTime;
        }
        var roleId=$('#searchRole').val();
        if(ifNotNull(roleId)){
            data.roleId=roleId;
        }
        var post=$('#searchDuty').val();
        if(ifNotNull(post)){
            data.post=post;
        }
        var storeId=$('#searchStore').val();
        if(ifNotNull(storeId)){
            data.storeId=storeId;
        }
        var status=$('#searchStatus').val();
        if(ifNotNull(status)){
            data.status=status;
        }
        data.page=1;
        data.rows=1000;
        var url=EmployeeListURL;
        $.ajax({
            async: false,
            url: url,
            dataType: 'jsonp',
            type: 'GET',
            jsonp: 'callback',
            data: data,
            success: function (json) {
                var result=verifyResult(json);
                if(result) {
                    if (oTable != null) {
                        oTable.fnClearTable();
                        oTable.dataTable().fnDestroy();
                    }
                    var list = json.attach.list;
                    var text = "";
                    for (var i = 0; i < list.length; i++) {
                        var employee = list[i];
                        var lastlogintime = employee.lastLoginTime.substring(0, 16);
                        if (lastlogintime == "2016-01-01 00:00") {
                            lastlogintime = "- -";
                        }
                        text += "<tr id='" + employee.userId + "'><td>" + employee.userId + "</td><td>" + employee.name + "</td><td>" + employee.userTel
                                + "</td><td>" + employee.city + " " + employee.storeName
                                + "</td><td>" + employee.post + "</td><td>" + getRoles(employee.roles) + "</td>"
                                + "<td>" + lastlogintime + "</td><td>" + employee.employeeStatus + "</td><td>"
                                + " <a href='javascript:void(0);' class='btn blue btn-xs edit'><i class='fa fa-edit'></i> 编辑</a>&nbsp;&nbsp;"
                                + "<a href='javascript:void(0);' class='btn default btn-xs delete'><i class='fa fa-trash-o'></i> 删除</a>"
                                + "</td></tr>";
                    }
                    $("#EmployeeTbody").html(text);

                    // begin first table

                    oTable = $('#EmployeeTable').dataTable({
                        "aoColumns": [
                            null,
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false},
                            {"bSortable": false}
                        ],
                        "aLengthMenu": [
                            [5, 15, 20, -1],
                            [5, 15, 20, "All"] // change per page values here
                        ],
                        // set the initial value
                        "bDestroy": true,
                        "retrieve": true,
                        "aaSorting": [[0, "asc"]],
                        "iDisplayLength": 20,
                        "sPaginationType": "bootstrap"
                    });

                    $("#EmployeeTable_filter").hide();
                    $("#EmployeeTable_length").hide();
                }
            }
        })
    }
    function getRoles(roles){
        var roleName="";
        if(ifNotNull(roles)){
            for(var i=0;i<roles.length;i++){
                var role=roles[i];
                roleName+=role.roleName;
                if(i<(roles.length-1)){
                    roleName+=",";
                }
            }
        }
        return roleName;
    }
</script>